<template>
    <view class="overflow-x-hidden bg-white padding-bottom-30">
        <custom><template #backText>中营项目</template></custom>
        <view class="bg-gradual-nddyny" style="padding-bottom: 250rpx;">
            <view class="padding-top-40 padding-lr-30 flex align-center justify-between">
                <view>
                    <view class="text-xxl">{{page.invest_info.name}}</view>
                    <view class="margin-top-10">{{page.invest_area_name ? page.invest_area_name : '让实体客户价值再现'}}</view>
                </view>
                <view @tap="$store.commit('userNavTo', '/project/invest/myPage?invest_id='+page.invest_info.invest_id+'&name='+page.invest_info.name)"
                    class="light bg-nddyny round padding-lr-40 padding-tb-20" style="margin-right: -60rpx;">
                    <view class="text-xl text-black opacity8 flex align-center">
                        <text class="cuIcon-form"></text>
                        <text class="text-df margin-lr-10">我的账户</text>
                        <text class="cuIcon-right"></text>
                    </view>
                </view>
            </view>
        </view>
        <view class="bg-white margin-lr-30 shadow-warp radius padding-30" style="margin-top: -200rpx;">
            <view class="padding-lr-70 padding-top-20">
                <view class="flex justify-center text-center text-gray text-df">
                    <view class="flex-sub">已兑{{page.invest_share_name}}数量</view>
                    <view class="flex-sub">已兑{{page.invest_share_name}}人次</view>
                </view>
                <view class="flex justify-center text-center text-nddyny text-xl margin-top-10">
                    <view class="flex-sub">{{page.invest_info.invest_gold_share_amount | floor}}</view>
                    <view class="flex-sub">{{page.invest_info.invest_times}}</view>
                </view>
            </view>
            <view class="text-666 text-df flex justify-center solid padding-tb-20 margin-top-40">
                剩余可兑换{{page.invest_share_name}}数：{{page.invest_info.need_gold_share_amount | bc('sub', page.invest_info.invest_gold_share_amount) | floor}}
            </view>
            <view class="margin-top-30">
                <nFormItem title="我的金股" :value="$store.state.user.user_asset_info.gold_share_amount | floor"></nFormItem>
                <nFormItem :title="page.invest_share_name+'数量'" :placeholder="'请填写要兑换'+page.invest_share_name+'的数量'"
                    :data.sync="asset2invest" field="invest_gold_share_amount"></nFormItem>
            </view>
            <view class="text-gray text-right">
                <view v-if="$store.state.user.identity_info.area_code == 0">
                    请先实名
                </view>
                <view v-else-if="page.form.area_code == 0 || page.form.area_code == $store.state.user.identity_info.area_code">
                    <!-- 本地 -->
                    起兑数量
                    <text class="text-nddyny padding-lr-4">{{page.invest_info.local_start_gold_share_amount | floor}}</text>
                    , 数量为
                    <text class="text-nddyny padding-lr-4">{{page.invest_info.local_start_gold_share_amount | floor}}</text>
                    的倍数
                </view>
                <view v-else-if="page.invest_info.other_start_gold_share_amount != -1">
                    <!-- 外地 -->
                    非本区域用户起兑数量
                    <text class="text-nddyny padding-lr-4">{{page.invest_info.other_start_gold_share_amount | floor}}</text>
                    , 数量为
                    <text class="text-nddyny padding-lr-4">{{page.invest_info.other_start_gold_share_amount | floor}}</text>
                    的倍数
                </view>
                <view v-else>
                    非本区域用户不可兑换
                </view>
                <view class="margin-top-10" v-if="page.invest_info.max_invest_gold_share_amount > 0">
                    当前账户剩余可兑换{{page.invest_share_name}}数
                    <text class="text-nddyny padding-left-6">
                        <template v-if="page.invest_user_info">
                            {{page.invest_info.max_invest_gold_share_amount | bc('sub', page.invest_user_info.invest_gold_share_amount) | floor}}
                        </template>
                        <template v-else>
                            {{page.invest_info.max_invest_gold_share_amount | floor}}
                        </template>
                    </text>
                </view>
            </view>
        </view>
        <nFormButton title="确认兑换" :tap="asset2investSubmit"></nFormButton>
        <pageJoinlex v-if="page.form.type == 0" :page="page"></pageJoinlex>
        <pageCar v-else-if="page.form.type == 3" :page="page" :load_info="load_info"></pageCar>
        <pageOperateHome v-else-if="page.form.type == 100" :page="page"></pageOperateHome>
        <pageEntityShop v-else-if="page.form.type == 101" :page="page"></pageEntityShop>
    </view>
</template>

<script>
    import pageJoinlex from '@/pages/project/invest/pageJoinlex.vue';
    import pageCar from '@/pages/project/invest/pageCar.vue';
    import pageOperateHome from '@/pages/project/invest/pageOperateHome.vue';
    import pageEntityShop from '@/pages/project/invest/pageEntityShop.vue';
    export default {
        components: {
            pageJoinlex,
            pageCar,
            pageOperateHome,
            pageEntityShop
        },
        data() {
            return {
                load_info: {},
                asset2invest: {
                    formtag: {},
                    form: {
                        invest_gold_share_amount: ''
                    },
                    formbak: {
                        invest_gold_share_amount: ''
                    }
                },
                page: {
                    invest_share_name: '',
                    invest_area_name: '',
                    form: {
                        type: 0,
                        area_code: 0,
                        type_area_no: 0,
                    },
                    invest_info: {
                        invest_gold_share_amount: 0,
                        invest_id: 0,
                        invest_times: 0,
                        local_start_gold_share_amount: 0,
                        max_invest_gold_share_amount: 0,
                        name: '中营联享',
                        need_gold_share_amount: 0,
                        other_start_gold_share_amount: 0,
                        user_amount: 0,
                    },
                    invest_user_info: {
                        iu_no: '',
                        invest_times: 0,
                        invest_gold_share_amount: 0,
                        created_at: '',
                    }
                }
            }
        },
        onLoad(params) {
            this.load_info = params;
            this.page.form.type = params.type || '0';
            this.page.form.area_code = params.area_code || '0';
            this.page.form.type_area_no = params.type_area_no || '0';
            switch (this.page.form.type) {
                case '0':
                    this.page.invest_share_name = '期权';
                    break;
                case '100':
                case '101':
                    this.page.invest_share_name = '金股';
                    break;
                default:
                    this.page.invest_share_name = '股权';
            }
            if (this.page.form.area_code != 0) {
                this.page.invest_area_name = this.$nddyny.address.getProvCityAreaName(this.page.form.area_code, ' ');
            }
            this.pageInit();
        },
        methods: {
            pageInit() {
                this.$api.post(this, {
                    url: '/project/invest/page',
                    data_key: 'page',
                    success: (Result, data_key) => {
                        if (this.$api.form.toast(this, Result, data_key)) return;
                        this.page.invest_info = Result.result.invest_info;
                        this.page.invest_user_info = Result.result.invest_user_info;
                    }
                });
            },
            asset2investSubmit() {
                this.$api.post(this, {
                    loading: '兑换中',
                    url: '/project/invest/asset2invest',
                    data_key: 'asset2invest',
                    data_append: this.page.form,
                    success: (Result, data_key) => {
                        if (this.$api.form.toast(this, Result, data_key)) return;
                        this.$user.updateUserAssetInfo(this);
                        this.asset2invest.form = this.$nddyny.object.copy(this.asset2invest.formbak);
                        this.pageInit();
                        this.$store.commit('userToastSuccess', '兑换成功');
                    }
                });
            },
        },
    }
</script>
